<template>
	<div class="">
		<ul class="home-footer-nav">
			<li @click="jumpArticle()" class="footer-nav-li">
				<img v-if="page=='article'" src="../../assets/icon/index_14.gif" />
				<img v-else src="../../assets/icon/article1.png" />
				<span>新闻资讯</span>
			</li>
			<li @click="jumpBrace" class="footer-nav-li">
				<img class="" src="../../assets/icon/publish.gif" />
				<span>牙套计划</span>
			</li>
			<li class="footer-nav-li-logo">
				<img class="" src="../../assets/logo.jpg" />
			</li>
			<li @click="jumpMy(2)" class="footer-nav-li">
				<img v-if="page=='user'" src="../../assets/icon/user_03.gif" />
				<img v-else class="" src="../../assets/icon/user_info.gif" />
				<span>我的账户</span>
			</li>
			<li @click="jumpTalk" class="footer-nav-li">
				<img class="" src="../../assets/icon/talk.png" />
				<span>医患交流</span>
			</li>
		</ul>
		<!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">尚未登录</h4>
					</div>
					<div class="modal-body">
						是否前往登录界面？
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button @click="go" type="button" class="btn btn-primary">确定</button>
					</div>
				</div>
			</div>
		</div>
	</div>

</template>

<script>
	export default {
		props: ['page'],
		data() {
			return {
				uid: '',
				token: '',
				bid: '',
				step: '',
				i: '',
			}
		},
		mounted() {
			console.log(this.page);
			this.uid = localStorage.getItem('uid');
			this.token = localStorage.getItem('token');
		},
		methods: {
			//获取牙套计划
			getPlan() {
				var self = this;
				var data = {
					uid: self.uid,
					token: self.token
				};
				$.post(global.domain + global.API.braces_plan_info, data, function(msg) {
					if(msg.error == 0) {
						if(msg.has_plan == 0) {
							self.$router.push({
								path: '/brace_type'
							});
						} else {
							self.bid = msg.braces_plan.id;
							self.step = msg.now_steps;
							self.$router.push({
								path: '/brace_home',
								query: {
									pName: self.page,
									step: self.step
								}
							});
						}
					} else {
						console.log(msg.error);
						if(msg.is_auth == 0) {
							localStorage.clear();
							self.$router.push({
								path: '/login'
							});
						}
					}
				}, 'json');
			},
			go() {
				$('#myModal').modal('toggle');
				this.$router.push({
					path: '/login'
				});
			},
			//跳到文章资讯
			jumpArticle() {
				this.$router.push({
					path: '/'
				});
			},
			//跳到牙套计划
			jumpBrace() {
				if(this.uid) {
					this.getPlan();
				} else {
					$('#myModal').modal('toggle');
					//					this.$router.push({
					//						path: '/login'
					//					});
				}
			},
			//跳到我的中心
			jumpMy() {
				if(this.uid) {
					this.$router.push({
						path: '/user_center'
					});
				} else {
					$('#myModal').modal('toggle');
					//					this.$router.push({
					//						path: '/login'
					//					});
				}
			},
			//跳到医患中心
			jumpTalk() {
				this.$router.push({
					path: '/talk',
					query: {
						pName: this.page
					}
				});
			}
		}
	}
</script>

<style scoped>
	@import "../../style/homeFooter.css";
</style>